import styled ,{createGlobalStyle} from "styled-components";
import style from '../assets/css_variable'

// css injs
export const Wrapper=styled.div`
    width: 500px;
    margin: 10 auto;
    font-size: 14px;
    background-color: ${style.white_color};
    border: 1px solid #f1f1f1;
    padding: 20px;
    .comment-list{
        background-color: ${style.white_color};
        padding: 20px;
        .comment{
            display: flex;
        }
    }
`

export const InputWrapper=styled.div`
    background-color: ${style.white_color};
    border: 1px solid #f1f1f1;
    padding: 20px;
    margin-bottom: 10px;
    /* 方便css 逻辑的封装 css 嵌套 模块化的能力 */
    .comment-field{
        margin-bottom:15px;
        display: flex;
        .comment-field-name{
            display: flex;
            flex-basis: 100px;//flex 基础大小
            font-size:14px;
        }
        .comment-field-input{
            display: flex;
            flex: 1;
            input, textarea {
                border: 1px solid #e6e6e6;
                border-radius: 3px;
                padding: 5px;
                outline: none;
                font-size: 14px;
                flex: 1
            }
            textarea {
                height: 100px;
            }
        }
        
    }
    .comment-field-button{
        display: flex;
        justify-content: flex-end;// 主轴对齐方式
        button{
            padding: 5px 10px;
            width: 80px;
            border: none;
            border-radius: 3px;
            background-color: #00a3cf;
            color: #fff;
            outline: none;
            cursor: pointer;
            &:active{//& 同级别 作用在其身后
                background: #13c1f1;
            }

        } 
    }
`